<template>
  <div class="message-container">
    <van-nav-bar left-arrow title="个人信息" @click-left="this.$router.go(-1)" />
    <div class="message-content">
      <div class="card">
        <span>头像</span>
        <div class="avator">
          <van-uploader
            @oversize="onOversize"
            @delete="deleteClzp"
            :before-read="beforeRead"
            :after-read="clzpAfterRead"
            v-model="fileList"
            :max-count="1"
            :max-size="5 * 1024 * 1024"
          ></van-uploader>
        </div>
      </div>

      <div class="card">
        <span>用户名</span>
        <input type="text" v-model="msglist.name" />
      </div>
      <div class="card">
        <span>电话</span>
        <input type="text" v-model="msglist.phone" />
      </div>
      <div class="card">
        <span>email</span>
        <input type="text" v-model="msglist.email" />
      </div>
      <div class="card">
        <span>性别</span>
        <van-radio-group v-model="msglist.sex" direction="horizontal">
          <van-radio name="0">女</van-radio>
          <van-radio name="1">男</van-radio>
        </van-radio-group>
      </div>
    </div>
    <van-button type="primary" @click="save">保 存</van-button>
    <van-button type="primary" @click="exit">退 出 登 录</van-button>
  </div>
</template>

<script>
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
import { updateUser, updateAvator, getUser } from '../../api/user.js'
export default {
  data() {
    return {
      clzpfilePath: '', // 删除所需参数
      pic: require('../../assets/image/default.png'),
      msglist: JSON.parse(window.sessionStorage.getItem('userInfo')),
      fileList: [] // 上传的文件列表
    }
  },
  mounted() {
    this.fileList = [{ url: 'http://192.168.101.65:9000' + this.msglist.userpic, isImage: true }]
  },
  methods: {
    async save() {
      const { data: res1 } = await updateUser(this.msglist)
      if (res1.code === 1) {
        showToast('修改成功！')
      } else {
        showToast('修改失败！')
      }
    },
    // 退出登录
    exit() {
      showConfirmDialog({
        message: '确认退出登录吗'
      })
        .then(() => {
          // on confirm
          window.sessionStorage.removeItem('userInfo')
          window.sessionStorage.removeItem('token')
          this.$router.push('/login')
          showSuccessToast('已退出登录！')
        })
        .catch(() => {
          return showToast('已取消')
        })
    },
    // 校验上传图片大小
    onOversize(file) {
      console.log(file)
      this.$toast('文件大小不能超过5MB')
    },
    // 校验图片的格式
    beforeRead(file) {
      if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
        this.$toast('请上传正确格式的图片')
        return false
      }
      return true
    },
    // 照片上传事件方法
    async clzpAfterRead(file) {
      // 上传状态提示开启
      // file.status = 'uploading'
      // file.message = '上传中...'
      // 创建一个空对象实例
      const formData = new FormData()
      // 调用append()方法添加数据
      formData.append('filedata', file.file)
      const { data: res } = await updateAvator(formData)
      if (res.code === 1) {
        window.sessionStorage.removeItem('userInfo')
        const { data: res1 } = await getUser()
        if (res1.code === 1) {
          window.sessionStorage.setItem('userInfo', JSON.stringify(res1.data))
          this.msglist = res1.data
        }
      } else {
        return showToast('上传头像失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.message-container {
  height: 100vh;

  .message-content {
    background-color: #fff;
    .card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      margin: 0 10px;
      padding: 15px 0;

      .avator {
        width: 90px;
        height: 90px;
        border-radius: 8px;
        overflow: hidden;

        // 修改头像
        :deep(.van-uploader) {
          width: 70px;
          height: 70px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      input {
        width: 50%;
        padding-left: 5px;
        text-align: right;
        border: 0;
      }
    }
  }

  .van-button {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
    font-size: 16px;
  }
}
</style>
